{% extends 'base_backend.html' %}
{% load static %}
{% load my_filter %}

{% block header_tail %}
    <link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/style.css' %}">
    <link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/iconfont.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'public/ComboSelect/css/combo.select.css' %}">
    <link rel="stylesheet" href="{% static 'zhongbao/config/css/main.css' %}">
    <script src="{% static 'plugins\jQuery\jquery-2.2.3.min.js' %}"></script>

    <script src="{% static 'plugins/vue1/vue.js' %}"></script>

    <style>
        .login-banner {
            width: 100%;
            background: url("{% static 'public/img/banner2.jpg' %}") center bottom/cover no-repeat;
        }
    </style>
{% endblock header_tail %}

{% block section_content %}
    <div>
        <div class="box-header with-border">
            <h3 class="box-title">{{ model_verbose_name }}</h3>
        </div>
        <!-- form start -->
        <div class="box box-primary">
        <div class="box-header with-border" style="border-color: #1b6d85">

                <!-- Date range -->
                <form role="form" id="searchForm">
                    <input class="no-display" type="text">
                    <p style="clear: both"></p>
                    <div>
                        <div style="float: left;" class="select-config-div">
                            <label>从：</label>
                            <select name="fromYear">
                                <template v-for="year in years">
                                    <option v-if="year == thisYear" selected="selected" value="[[ year ]]">[[ year ]]年</option>
                                    <option v-else value="[[ year ]]">[[ year ]]年</option>
                                </template>
                            </select>
                            <select name="fromMonth">
                                <template v-for="month in months">
                                    <option v-if="month == thisMonth" selected="selected" value="[[ month ]]">[[ month ]]月</option>
                                    <option v-else value="[[ month ]]">[[ month ]]月</option>
                                </template>
                            </select>
                        </div>
                        <div style="float: left;" class="input-group">
                            <label for="id" class="control-label">至：</label>
                            <select name="toYear">
                                <template v-for="year in years">
                                    <option v-if="year == thisYear" selected="selected" value="[[ year ]]">[[ year ]]年</option>
                                    <option v-else value="[[ year ]]">[[ year ]]年</option>
                                </template>
                            </select>
                            <select name="toMonth">
                                <template v-for="month in months">
                                    <option v-if="month == thisMonth" selected="selected" value="[[ month ]]">[[ month ]]月</option>
                                    <option v-else value="[[ month ]]">[[ month ]]月</option>
                                </template>
                            </select>
                        </div>
                        <div style=";float: right">
                            <input type="text" class="no-display">
                            <span id="searchBtn" v-on="taskStatistics" class="form-control pull-left btn btn-sm btn-primary"
                                    style="margin-top:20px;width: 50px">统计
                            </span>
                        </div>
                    </div>
                    <p style="clear: both"></p>
                    <div class="form-group">
                    </div>
                </form>
            </div>
        <!--
            <div class="box-header with-border" style="border-color: #1b6d85">
            </div>
            <div id="ItemsTree" style="position:absolute;left:200px;top:90px; display:none;width:250px;height:300px;border:dashed 1px #000000; background-color:#F7F7F7; overflow:auto"></div>
        -->
        <!-- 展示搜索出来的任务 -->
            <div id="main">
                <div id="showMessage" v-show="message"> [[ message ]]</div>
                <div class="box-body" v-show="showMain">
                    <form id="model_form" role="form"
                          method="post">{% csrf_token %}
                        <div class="group">
                            <table id="each_table" border="1" class="table table-bordered table-hover table-striped">
                                <thead>
                                <tr>
                                    <th v-for="head in tableData.headers">
                                        <span style="float: left">
                                            [[ head.name ]]
                                        </span>
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                    <template v-for="item in tableData.items">
                                        <!--<tr v-if="task.allocation_flag">-->
                                        <tr>
                                            <template v-for="head in tableData.headers">
                                                <template v-if="head.key == 'status'">
                                                    <td v-if="head.key == 'status'">[[ parseStatus(item[head.key]) ]]</td>
                                                </template>
                                                <template v-else>
                                                    <td>[[ item[head.key] ]]</td>
                                                </template>
                                            </template>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                        </div>
                        <!-- /.box-footer -->
                        <div class="box-footer">
                            <button class="btn btn-primary no-display" id="submit_button">确认</button>
                            <button type="button" class="btn btn-primary" id="save_submit" name="_save"
                                    style="display: none">sure
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        Vue.config.delimiters = ["[[", "]]"];
        var mainVue = new Vue({
            el: "#main",
            data: {
                tableData: {}
            },
            methods: {
                parseTime: function (timeStamp) {
                    if (!timeStamp) {
                        return ""
                    }
                    var newDate = new Date();
                    newDate.setTime(timeStamp * 1000);
                    return newDate.toLocaleDateString()
                },
                parseStatus: function (status) {
                    var statuses = {
                        2: {
                            name: "待接收"
                        },
                        3: {
                            name: "已接收"
                        },
                        4: {
                            name: "待审核"
                        },
                        5: {
                            name: "已合格"
                        },
                        6: {
                            name: "不合格"
                        },
                        0: {
                            name: "已回收"
                        }
                    };
                    return statuses[status]["name"]
                }
            }
        });

        var years = [];
        var months = [1,2,3,4,5,6,7,8,9,10,11,12];
        var newDate = new Date();
        var thisYear = newDate.getFullYear();
        var thisMonth = newDate.getMonth() + 1;
        for (var year=2018; year <= thisYear; year++){
            years.push(year)
        }
        var searchFormVue = new Vue({
            el: "#searchForm",
            data: {
                years: years,
                months: months,
                fromYear: thisYear,
                toYear: thisYear,
                fromMonth: thisMonth,
                toMonth: thisMonth
            },
            methods: {
                taskStatistics: function(){
                    $.ajaxSetup({
                        data:{
                            csrfmiddlewaretoken:'{{ csrf_token }}',
                            fromTime: this.getFromTime(),
                            toTime: this.getToTime()
                        }
                    });
                    $.post(
                        "{% url 'task:statistics' %}",
                        function(response){
                            if (response.message){
                                alert(response.message);
                            }else{
                                this.initMainVue(response.tableData)
                            }
                        }
                    )
                },
                initMainVue: function(tableData){
                    mainVue.tableData = tableData;
                },
                getFromTime: function(){
                    var fromMonth = String(this.fromMonth);
                    fromMonth = fromMonth.length() == 1 ?  "0" + fromMonth : fromMonth;
                    var timeString = "" + this.fromYear + "-" + fromMonth + "-01 00:00:00";
                    var fromTime = Date.parse(new Date(timeString)) / 1000;
                    console.log(fromTime);
                    return fromTime;
                },
                getToTime: function() {
                    var toMonth = String(this.toMonth);
                    toMonth = toMonth.length() == 1 ? "0" + toMonth : toMonth;
                    var timeString = "" + this.toYear + "-" + toMonth + "-01 00:00:00";
                    var toTime = Date.parse(new Date(timeString)) / 1000;
                    console.log(toTime);
                    return toTime;
                }
            }
        });


    </script>
{% endblock section_content %}
